<template>
    <view class="page-container">
        <u-navbar back-icon-color="#FFF" title="我的-修改密码" title-color="#FFF"
                  :background="{background: '#00a0e9'}"></u-navbar>
        <view class="content">
            <view class="form">
                <u-form label-width="140rpx" :error-type="['toast']">
                    <u-form-item label="原密码" label-align="right">
                        <view class="line"></view>
                        <u-input :custom-style="inputStyle" placeholder="填写原密码"></u-input>
                    </u-form-item>

                    <u-form-item label="新密码" label-align="right">
                        <view class="line"></view>
                        <u-input :custom-style="inputStyle" placeholder="填写新密码"></u-input>
                    </u-form-item>

                    <u-form-item label="确认密码" label-align="right">
                        <view class="line"></view>
                        <u-input :custom-style="inputStyle" placeholder="再次填写新密码"></u-input>
                    </u-form-item>

                    <u-button ripple :hair-line="false" size="medium" :custom-style="buttonStyle">确认修改密码</u-button>
                </u-form>
            </view>
        </view>
    </view>
</template>

<script>
	import UNavbar from "../../uview-ui/components/u-navbar/u-navbar";
	import UForm from "../../uview-ui/components/u-form/u-form";
	import UFormItem from "../../uview-ui/components/u-form-item/u-form-item";
	import UInput from "../../uview-ui/components/u-input/u-input";
	import UButton from "../../uview-ui/components/u-button/u-button";
	import UGap from "../../uview-ui/components/u-gap/u-gap";

	export default {
		components: { UGap, UButton, UInput, UFormItem, UForm, UNavbar },
		data() {
			return {
				buttonStyle: {
					width: '300rpx',
					background: '#00a0e9',
					color: "#FFF",
					margin: '100rpx auto',
					display: 'block',
					padding: '0 20rpx'
				}
			};
		},
		computed: {
			inputStyle() {
				return {
					paddingLeft: '20rpx',

				}
			}
		}
	}
</script>

<style lang="less">
    .page-container {
        background: #f0f0f0;

        .content {
            padding: 20rpx;

            .form {

                .u-form-item {
                    padding: 10rpx 0;
                    margin-bottom: 20rpx;
                    background: #FFF;
                    border-radius: 10rpx;

                    .line {
                        position: absolute;
                        content: '';
                        left: 145rpx;
                        background:#aaa;
                        width: 1rpx;
                        height: 35rpx;
                        top:50%;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }
</style>
